<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>css选择器-错位选择</title>
    <style>
      .container {
        margin: auto;
      }
      #main {
        max-width: 800px;
      }
      .card {
        width: 100%;
        height: 250px;
        border: 1px solid;
        border-radius: 20px;
        margin: 10px;
        overflow: hidden;
      }
      .card img {
        width: 400px;
        height: 250px;
        object-fit: cover;
      }
      .card:nth-of-type(odd) img {
        float: left;
      }
      .card:nth-of-type(even) img {
        float: right;
      }
      .content {
        width: 350px;
        text-align: center;
      }
      .content span {
        text-indent: 2em;
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 8;
        line-clamp: 8;
        -webkit-box-orient: vertical;
      }
      .content:nth-of-type(odd) {
        float: right;
      }
      .content:nth-of-type(even) {
        float: left;
      }
    </style>
  </head>
  <body>
    <div class="container" id="main">
      <div class="card">
        <img src="1.jpeg" alt="" />
        <div class="content">
          <h3>仙剑奇侠传五</h3>
          <span>
            《仙剑奇侠传五》是由大宇资讯旗下软星科技（北京）有限公司所制作的一款国产单机中文角色扮演电脑游戏。于2011年7月7日两岸三地同步发行
            。此外本作于2016年被改编成电视剧《仙剑云之凡》。
            本作是《仙剑奇侠传》系列的第六部作品，主题为“心愿”，剧情发生在《仙剑奇侠传》初代剧情的30多年后，另有其外传性质作品《仙剑奇侠传五前传》。除了游戏本体之外，还有三部DLC，分别为《魔灵幻像》《暮雨今夕》《前尘若梦》。
          </span>
        </div>
      </div>
      <div class="card">
        <img src="2.jpeg" alt="" />
        <div class="content">
          <h3>笑傲江湖</h3>
          <span
            >《笑傲江湖》是由华夏视听传媒集团、于正工作室等单位共同出品的古装武侠剧，胡意涓和黄俊文执导，霍建华、陈乔恩、袁姗姗、陈晓、杨蓉、杨明娜、黄文豪、邓莎、韩栋等主演。
            该剧讲述华山派大弟子令狐冲，生性豁达不羁。偶遇剑宗高人风清扬授以《独孤九剑》，又意外尽得五岳各派剑法精髓，导致师父岳不群猜疑，藉口逐出师门。岳不群内里奸险非常，为独得《葵花宝典》，竟设计令武林各派自相残杀，唯最终作法自毙。而令狐冲最终则辗转练成吸星大法和易筋经，成为恒山派掌门的故事。
            该剧于2013年2月6日在湖南卫视首播，2013年5月6日登陆韩国Asian
            N电视台，取得了较高的收视率。</span
          >
        </div>
      </div>
      <div class="card">
        <img src="3.jpg" alt="" />
        <div class="content">
          <h3>仙剑ol</h3>
          <span>
            《仙剑Online》（简称《仙剑OL》）是由大宇资讯股份有限公司研发的一款MMORPG游戏，于2009年1月9日在中国大陆公测。游戏主线剧情故事发生在《仙剑奇侠传二》八年以后，李忆如将和魔尊之子韩仲晰交织出一段爱恨情仇的故事。该游戏已停服。</span
          >
        </div>
      </div>
      <div class="card">
        <img src="4.jpeg" alt="" />
        <div class="content">
          <h3>逍遥游</h3>
          <span
            >播报 编辑 讨论3 上传视频 仙剑奇侠传官方卡牌桌面游戏
            《仙剑奇侠传：逍遥游》是一款“仙剑之父”姚壮宪亲自监制，由软星科技（北京）有限公司推出的仙剑奇侠传官方卡牌桌面游戏。于2012年3月1日开始预售
            ，3月15日正式发售。线上在售的分为四个版本，分别是“闪卡增强版”、“四海逍遥版”、“回魂仙梦版”和“仗剑江湖版”。</span
          >
        </div>
      </div>
      <div class="card">
        <img src="5.jpeg" alt="" />
        <div class="content">
          <h3>仙剑奇侠传四</h3>
          <span
            >《仙剑奇侠传四》是由杨玄、黄埜执导，陈哲远、鞠婧祎、茅子俊、毛晓慧、陈楚河等主演的古装仙侠剧
            。
            该剧根据上海软星同名单机游戏改编，讲述了云天河、韩菱纱、柳梦璃和慕容紫英在“寻仙”的旅途中经历种种困难和磨练，悟得“欲求仙道先修人道”的故事。</span
          >
        </div>
      </div>
    </div>
  </body>
</html>
